<template>
	<!-- 报名页 -->
	<view class="content">
		<view class="form">
			<view class="sign-top">
				<text>姓名</text><input placeholder="填写您的真实姓名" v-model="name" />
			</view>
			<view class="sign-top">
				<text>手机</text><input type="text" placeholder="填写您的真实手机号码" v-model="phone" maxlength=11 @change="passTel" />
			</view>
			<view class="sign-top">
				<text>年龄</text><input placeholder="填写您的真实年龄" v-model="age" />
			</view>
			<view class="sign-top">
				<text>性别</text>
				<view class="radio-box">
					<text class="radio" :class="{'on':curruntTicket===index}" v-for="(item,index) in releaseType" @click="select(index)">
						<text class="radio-in"></text>
						<text class="radio-txt">{{item}}</text>
					</text>
				</view>
			</view>
			<view class="sign-img">
				<text>图片</text>
				<image :src="src||'/static/images/addImage.png'" mode="aspectFill" class="word-photo-info" @click="chooseImage"></image>
				<image :src="src" mode="aspectFill" v-for="src in imgArr"></image>
			</view>
		</view>
		<view class="bottom_pay_con">
			<!-- 模态弹框 -->
			<u-modal v-model="show" :title-style="{color: 'red'}" :show-title="false" :show-confirm-button="false"
			 :mask-close-able="true">
				<view class="slot-content">
					<view class="popup_container">
						<view class="img_con">
							<image class="img" :src="url" mode="widthFix"></image>
						</view>
						<view class="text_con">
							<view class="title">{{content.title}}</view>
							<view class="content">{{content.text}}</view>
						</view>
						<view class="bc_con"></view>
					</view>
				</view>
			</u-modal>
			<button class="pay_btn" type="default" @click="isPass">我要报名</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'applyPopup',
		props: {
			url: {
				type: String,
				default: '/static/images/submit.png'
			},
			content: {
				type: Object,
				default: () => {
					return {
						title: "亲，您的报名提交成功了～",
						text: "请保持手机通畅，我们将和您联系"
					}
				}
			}
		},
		data() {
			return {
				imgArr:[],
				show: false,
				releaseType: ['男', '女'],
				curruntTicket: 0,
				name: "",
				phone: "",
				age: "",
				src: "",
				sex: "男",
				id: ""
			}
		},
		created() {
			// console.log(this.url)
		},
		onNavigationBarButtonTap() {
			uni.navigateBack({

			})
		},
		methods: {
			//验证name
			passName() {
				let reg = /^\w{2,8}$/;
				let passName = reg.test(this.name);
				return passName
			},
			//验证手机号
			passTel() {
				let reg = /^\d{11}$/;
				let passTel = reg.test(this.phone);
				return passTel
			},
			//验证年龄
			passAge() {
				let reg = /^\d{1,3}$/;
				let passAge = reg.test(this.age);
				return passAge
			},
			//图片预览
			previewImg(current){
				uni.previewImage({
					current,
					urls:this.imgArr
				})
			},
			//选图
			chooseImage() {
				let token = uni.getStorageSync('token');
				// console.log(token)
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths[0];
						this.src = tempFilePaths;
						// console.log(tempFilePaths)
						uni.uploadFile({
							url: 'https://products.rimiedu.com:8085/comic-time/putImage',
							filePath: tempFilePaths,
							name: 'file',
							method: "POST",
							formData: {
								// 'file':chooseImageRes.tempFiles[0].name
							},
							header: {
								'Authorization': token
							},
							success: (uploadFileRes) => {
								// console.log(uploadFileRes)
							}
						})
					},
					count: 9,
					sizeType: ['original', 'compressed']
				})
			},
			// 选择性别
			select(val) {
				this.curruntTicket = val
				if (this.curruntTicket == 0) {
					this.sex = "男"
				} else {
					this.sex = "女"
				}
			},
			//改变时间格式
			getDate() {
				let time = new Date()
				var year = time.getFullYear();
				// console.log(year);
				var month = time.getMonth() + 1;
				// console.log(month);
				var day = time.getDate();
				// console.log(day);
				var hour = time.getHours();
				var minute = time.getMinutes();
				var second = time.getSeconds();
				var newTime = year + '-' + month + '-' + day + 'T' + hour + ':' + minute + ':' + second + '.000+00:00';
				// console.log(newTime)
				return newTime
			},
			//判断正则
			isPass() {
				if (this.passName() && this.passTel() && this.passAge() && this.sex) {
					//上传数据
					this.show = true;
					let newTime = this.getDate()
					let token = uni.getStorageSync('token');
					this.$request('/comic-time/signUp', {
							"name": this.name,
							"phone": this.phone,
							"age": this.age,
							"multipartFiles": [this.src],
							"sex": this.sex,
							"recruitId": this.id,
							"signInsertTime": newTime
						},
						'POST', {
							"Authorization": token
						}
					).then(res => {
						// console.log(res)
					})
				} else {
					uni.showToast({
						title: "格式错误",
						position: "center",
						icon: "none",
						duration: 2000,
						mask: true
					});
				}
			}
		},
		onLoad(options) {
			// console.log(options)
			this.id = options.bid
		}
	}
</script>

<style lang="scss" scoped>
	@import '../sign/sign.scss'
</style>
